<script setup>

</script>

<template>
  <view class="certificate-page">
    <image class="background-img" src="/static/image/bgbook.png" mode="scaleToFill"></image>
    <view class="certificate-container">
      <view class="certificate-content">
        <image class="badge-bg" src="/static/badge_bg.png"></image>

        <view class="certificate-info">
          <text class="info-item">学校：武汉第一中学</text>
            <text class="info-item">队伍：武汉一中队</text>
          <text class="info-item">姓名：张达明</text>
          <text class="info-item">学号：20399010</text>
          <text class="award-info">武汉一中队被评为 2023 度优秀队伍，特发此证，以资鼓励</text>
        </view>
        <view class="certificate-footer">
          <text class="footer-text">XXXXXXXXXX</text>
          <text class="footer-text">2023-10-32</text>
        </view>
      </view>
    </view>

  </view>
</template>


<style scoped>
.certificate-page {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.background-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.certificate-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 29px;
  width: 80%;
  height: 100%;
}

.certificate-content {
  position: relative;
  width: 300px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景，使文字更清晰，可根据背景图调整透明度 */
  border: 2px solid #d4af37;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.badge-bg {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  opacity: 0.2;
}


.certificate-info {
  margin-bottom: 20px;
}

.info-item {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
}

.award-info {
  display: block;
  font-size: 14px;
  margin-top: 10px;
}

.certificate-footer {

 align-items: center;
}

.footer-text {
  display: block;
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}
</style>